<template>
  <div class="listLinkIndexMain listLeavingIndexMain">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7">
        <Feature :titleName="'关于友链'">
          <slot>
            <div class="linksTypeMain" style="min-height: 200px">
              <div>关于友链问题，留言反馈请按照以下格式：</div>
              <div>格式：【网站访问地址】+【网站名称】</div>
              <div>例如：【www.zylweb.top】+【我的个人日志】</div>
              <div>说明：友链互链可在本站【问题反馈】中留言，处理周期为3个工作日！</div>
            </div>
          </slot>
        </Feature>
        <Feature :titleName="'相关说明'">
          <slot>
            <div class="linksTypeMain" style="min-height: 200px">
              <div>回复：留言本站不会直接回复，若有需要请留下相关联系方式。</div>
            </div>
          </slot>
        </Feature>
      </el-col>
      <el-col :xs="24" :sm="17" :md="17" :lg="17" :xl="17">
        <Feature :titleName="'问题反馈'">
          <slot>
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm">
              <el-form-item prop="title">
                <el-input v-model="ruleForm.title" placeholder="反馈主题"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="ruleForm.phone" placeholder="联系方式"></el-input>
              </el-form-item>
              <el-form-item prop="content">
                <el-input v-model="ruleForm.content" rows="5" type="textarea" placeholder="反馈内容..."></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即提交</el-button>
              </el-form-item>
            </el-form>
          </slot>
        </Feature>
        <Feature :titleName="'反馈列表'">
          <slot>
            <el-skeleton :rows="2" animated v-if="skeletonTopType" v-for="item in 5" class="zylMB30"/>
            <template v-for="(item, index) in leavingList">
              <div class="leavingList">
                <div class="leavingListTitle">{{ item.title }}</div>
                <div class="leavingListTime">{{ item.creationtime }}</div>
                <div class="leavingListText" v-html="item.content"></div>
              </div>
            </template>
          </slot>
        </Feature>
        <div class="zylPaginationMain" style="margin-bottom: 10px">
          <el-pagination background :total="pagList.total" :page-size="pagList.pageSize" @current-change="handlePageChange" layout="prev, pager, next"></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import '@/assets/scss/index.scss';
import Feature from '@/components/Feature';
import Interface from './serve/api';
export default {
  // 问题反馈
  name: 'leavingIndex',
  components: {
    Feature,
  },
  data () {
    return {
      skeletonTopType: true,
      leavingList: [],
      ruleForm: {
        title: '',
        creationtime: '',
        phone: '',
        content: '',
      },
      rules: {
        title: [
          {
            required: true,
            min: 5,
            message: '请输入主题，并且不少于5个字符！',
            trigger: 'blur',
          }
        ],
        content: [
          {
            required: true,
            min: 5,
            message: '请输入反馈内容，并且不少于5个字符！',
            trigger: 'blur',
          }
        ],
      },
      // 分页
      pagList: {
        total: 0,
        pageNum: 1,
        pageSize: 6,
      },
    }
  },
  mounted () {
    this.getLeavingAllQt();
  },
  methods: {
    // 提交
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.creationtime = this.newTime();
          let params = this.ruleForm;
          Interface.postLeavingAdd(params).then(res => {
            if (res.status === 200) {
              this.$notify({
                title: '反馈成功',
                message: '已收到您的反馈成功！',
                type: 'success',
              });
              this.getLeavingAllQt();
              this.ruleForm.title = '';
              this.ruleForm.creationtime = '';
              this.ruleForm.phone = '';
              this.ruleForm.content = '';
            };
          })
        } else {
          console.log('error submit!!')
          return false
        }
      });
    },

    // 留言列表
    getLeavingAllQt () {
      let params = {
        title: '',
        pageNum: this.pagList.pageNum,
        pageSize: this.pagList.pageSize,
      };
      Interface.getLeavingAllQt(params).then(res => {
        if (res.status === 200) {
          this.skeletonTopType = false;
          this.leavingList = res.data.list;
          this.pagList.total = res.data.total;
        }
      })
    },

    // 分页监听
    handlePageChange (val) {
      this.pagList.pageNum = val;
      this.getLeavingAllQt();
    },

    // 获取当前时间
    newTime () {
      let dateTime
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes()
        :
        new Date().getMinutes()
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds()
        :
        new Date().getSeconds()
      dateTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
      return dateTime
    },
  }
}
</script>
